<!-- token过期弹窗 -->
<template>
  <div>
    <a-modal 
      v-model="visible"
      :width="448"
      :dialog-style="{ top: '40vh' }"
      :maskClosable="false"
      :closable="false"
      :keyboard="false"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-exclaim64f tip-icon"></i> -->
        <Iconfont type='icon-exclaim64f'></Iconfont>
        <span style="margin-left: 4px;">{{$t('Login-Expired')}}</span>
      </template>

      <div>
        {{$t('Expired-login-tip')}}
      </div>

      <template slot="footer">
        <a-button type="primary" @click="handleReLogin">
          {{$t('ReLogin')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "TokenExpireTip",
  props: {
    visible: {
      type: Boolean,
      require: true
    }
  },

  data() {
    return {
      // reconnectMaxTimes: 5,
      // reconnectTimes: 0,
    }
  },

  methods: {
    // // 通过websocket获取token过期时间
    // initWebSocket() {
    //   if("WebSocket" in window) {
    //     const wsurl = `ws://${this.wsurl}/`;
    //     this.ws = new WebSocket(wsurl);
    //     this.ws.onopen = this.wsOnOpen;
    //     this.ws.onmessage = this.wsOnMessage;
    //     this.ws.onclose = this.wsOnClose;
    //   }else {
    //     // 浏览器不支持 WebSocket
    //     console.log("您的浏览器不支持 WebSocket!");
    //   }
    // },
    
    // wsOnOpen() {
    //   console.log('websocket已连接');
    //   // this.ws.send('websocket已连接')
    // },

    // wsOnMessage(evt) {
    //   let received_msg = evt.data;
    //   console.log('接收的数据', received_msg);
    // },

    // wsOnClose() {
    //   this.reconnectWs();
    //   console.log('websocket已断开');
    // },

    // reconnectWs() {
    //   //没连接上会一直重连，设置延迟避免请求过多
    //   setTimeout(() => {
    //     if(this.reconnectTimes < this.reconnectMaxTimes) {
    //       this.reconnectTimes++;
    //       if(this.ws.readyState === WebSocket.CLOSED) {
    //         console.log("正在重连，当前时间"+new Date())
    //         this.initWebSocket(); // 尝试重新连接
    //       }
    //     }else {
    //       console.log("已达到5次重连次数");
    //     }
    //   }, 3000)
    // },

    // 重新登录
    handleReLogin() {
      this.$emit('closeTokenModal')
      localStorage.removeItem('authToken');
      this.$router.push('/');
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainOrangeColor);
    margin-right: 8px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-body {
    display: flex;
    justify-content: center;
    font-weight: 700;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>